<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

        .log-con {
            margin-top: 100px;
        }

        .log-con .log-btn {
            width: 100%;
        }

    </style>

</head>
<body>

<div class="container log-con">
    <h3 style="text-align: center">注册</h3>
    <form class="col-lg-4 col-lg-offset-4">
        <div class="form-group">
            <label for="user">User</label>
            <input type="text" class="form-control" id="user" placeholder="User">
        </div>
        <div class="form-group">
            <label for="pass">Password</label>
            <input type="password" class="form-control" id="pass" placeholder="Password">
        </div>
        <div class="radio">
            <label class="text-info">
                <input type="radio" name="sex" id="sex1" value="woman" checked>
                女
            </label>
            <label class="text-info">
                <input type="radio" name="sex" id="sex2" value="man">
                男
            </label>
        </div>

        <button type="button" class="btn btn-info log-btn">注册</button>

    </form>
</div>

<script>

    $(".log-btn").on("click", function (e) {
        let user = $("#user").val()
        let pass = $("#pass").val()
        let sex = $("[name=sex]").val()


        if (user.trim() == "" || pass.trim() == "") {
            alert("用户名或密码为空")
            return
        }


        $.post("../controll.php",
            {
                user: user,
                pass: pass,
                sex: sex
            },
            function (data, status) {
                alert("数据: \n" + data + "\n状态: " + status);
            });


    });


</script>


</body>
</html>